 <div id="message-list" class="message-list" data-bind="with: $root.messageList, show_all_timestamps: true">
   <div class="messages-wrap" data-bind="antiscroll, event: {scroll: on_scroll}">
     <div class="messages"
          data-bind="css: {'flex-center': center_messages},
                     foreach: {data: conversation().messages_visible, as: 'message'}">
      <div class="message"
           data-bind="css: $parent.get_css_class(message),
                      css: {'message-marked': message.equals($parent.marked_message())},
                      in_viewport: function() {$parent.message_in_viewport(message)},
                      attr: {'data-uie-uid': message.id, 'data-uie-value': message.super_type, 'data-uie-expired-status': message.ephemeral_expires, 'data-uie-send-status': message.status}"
           data-uie-name="item-message">
        <div data-bind="template: {name: 'timestamp'}"></div>
        <div data-bind="template: {name: message.super_type}"></div>
      </div>
     </div>
   </div>
</div>
